<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link
        :to="`/home/${item.path}`"
        v-for="(item, index) in foot"
        :key="index"
      >
        <van-icon :name="item.meta.icon" />
        <span>{{item.meta.title}}</span>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      active:0,
      foot: [
        {
          path: "homePage",
          name: "HomePage",
          component: () =>
            import(
              /* webpackChunkName: "about" */ "../views/Home/HomePage.vue"
            ),
          meta: {
            title: "首页",
            // <van-icon name="wap-home-o" />
            icon: "wap-home-o",
          },
        },
        {
          path: "findHouse",
          name: "FindHouse",
          component: () =>
            import(
              /* webpackChunkName: "about" */ "../views/Home/FindHouse.vue"
            ),
          meta: {
            title: "找房",
            // <van-icon name="wap-home-o" />
            icon: "wap-home-o",
          },
        },
        {
          path: "release",
          name: "Release",
          component: () =>
            import(/* webpackChunkName: "about" */ "../views/Home/Release.vue"),
          meta: {
            title: "发布",
            // <van-icon name="wap-home-o" />
            icon: "wap-home-o",
          },
        },
        {
          path: "news",
          name: "News",
          component: () =>
            import(/* webpackChunkName: "about" */ "../views/Home/News.vue"),
          meta: {
            title: "消息",
            // <van-icon name="wap-home-o" />
            icon: "wap-home-o",
          },
        },
        {
          path: "myPage",
          name: "MyPage",
          component: () =>
            import(/* webpackChunkName: "about" */ "./Home/MyPage.vue"),
          meta: {
            title: "我的",
            // <van-icon name="wap-home-o" />
            icon: "wap-home-o",
          },
        },
      ],
    };
  },
};
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
html,
body,
#app,
.home {
  width: 100%;
  height: 100%;
}
.home {
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    overflow-y: scroll;
  }
  footer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      color: #333;
      display: flex;
      flex-direction: column;
      .van-icon {
        font-size: 25px;
      }
    }
    .router-link-active{
      color: red;
    }
  }
}
</style>